<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
    <script type="text/javascript">
      // 动画兼容函数
      window.requestAnimFrame = (function () {
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60)
          }
        )
      })()

      const canvas = document.getElementById('canvas')
      const context = canvas.getContext('2d')

      var sprite_image = new Image()
      sprite_image.src = './1.png'

      var tick = 1// 刻度
      var x = 0
      var y = 0
      function loop() {
        tick++
        // 计算位置
        if (tick % 10 === 0) {
          x = x + 80
          if (x === 240) {
            x = 0
            if (y === 0) {
              y = 143
            } else {
              y = 0
            }
          }

          context.clearRect(0, 0, canvas.width, canvas.height)
          context.drawImage(sprite_image, x, y, 80, 140, 0, 0, 80, 140)
        }
        window.requestAnimFrame(loop)
      }

      loop()
    </script>
  </body>
</html>
